{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="tit-user">
                                        <text class="price">8.8元</text>
                                        <text class="p-str">月会员数据</text>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="order1" width="152" height="152"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="wi-dth">
                                            <div class="d-str">{$orderMonth.memberMonthOrderTotal}</div>
                                            <div class="order-total">订单总数</div>
                                        </div>
                                        <div class="wi-dth">
                                            <div class="d-str-rig">{$orderMonth.memberMonthOrderTodayTotal}</div>
                                            <div class="order-total">当天订单总数</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="tit-user">
                                        <text class="price">108元</text>
                                        <text class="p-str">年会员数据</text>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="order2" width="152" height="152"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="wi-dth">
                                            <div class="d-str">{$orderYear.memberYearOrderTotal}</div>
                                            <div class="order-total">订单总数</div>
                                        </div>
                                        <div class="wi-dth">
                                            <div class="d-str-rig">{$orderYear.memberYearOrderTodayTotal}</div>
                                            <div class="order-total">当天订单总数</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="tit-user">
                                        <text class="price">3元</text>
                                        <text class="p-str">订阅需求数据</text>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="order3" width="152" height="152"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="wi-dth">
                                            <div class="d-str">{$orderDemand.demandOrderTotal}</div>
                                            <div class="order-total">订单总数</div>
                                        </div>
                                        <div class="wi-dth">
                                            <div class="d-str-rig">{$orderDemand.demandOrderTodayTotal}</div>
                                            <div class="order-total">当天订单总数</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="tit-user">
                                        <text class="price">499元</text>
                                        <text class="p-str">社群礼包数据</text>
                                    </div>
                                    <div class="d-fix">
                                        <canvas id="order4" width="152" height="152"></canvas>
                                    </div>
                                    <div class="fix-d">
                                        <div class="wi-dth">
                                            <div class="d-str">{$orderResource.resourceOrderTotal}</div>
                                            <div class="order-total">订单总数</div>
                                        </div>
                                        <div class="wi-dth">
                                            <div class="d-str-rig">{$orderResource.resourceOrderTodayTotal}</div>
                                            <div class="order-total">当天订单总数</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <input id="datas1" type="hidden" value="{$orderArea.datas}" name="datas1">

                        <div class="col-md-4">
                            <div class="card bor">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">订单地区分布</div>
                                    </div>
                                    <div style="text-align: center">
                                        <canvas id="comm-city" height="188"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>

<script>
    var chartDom = document.getElementById('order1');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$orderMonth.memberMonthPrice}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '订单总金额',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$orderMonth.memberMonthOrderTodayTotal}",
                    itemStyle: {
                        normal: {
                            color: '#E6A500'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$orderMonth.memberMonthOrderLastTotal}",
                    itemStyle: {
                        normal: {
                            color: '#5B78FF'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);

    var chartDom = document.getElementById('order2');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$orderYear.memberYearPrice}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '订单总金额',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$orderYear.memberYearOrderTodayTotal}",
                    itemStyle: {
                        normal: {
                            color: '#E6A500'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$orderYear.memberYearOrderLastTotal}",
                    itemStyle: {
                        normal: {
                            color: '#5B78FF'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);


    var chartDom = document.getElementById('order3');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 24
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$orderDemand.demandTotalPrice}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '订单总金额',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$orderDemand.demandOrderTodayTotal}",
                    itemStyle: {
                        normal: {
                            color: '#E6A500'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$orderDemand.demandOrderLastTotal}",
                    itemStyle: {
                        normal: {
                            color: '#5B78FF'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);

    var chartDom = document.getElementById('order4');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            //标题内容
            textStyle: {
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei',
                fontSize: 16
            },
            //标题位置
            top: '5%',
            left: '5%'
        },
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$orderResource.resourceTotalPrice}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '订单总金额',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 12
                }
            }
        ],
        series: [{
            type: 'pie',
            radius: ['70%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            hoverAnimation: false,//取消鼠标悬停动画
            animationEasing: 'cubicOut',//设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
                normal: {
                    show: false
                }
            },
            //增加阴影效果
            itemStyle: {
                normal: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(44, 196, 196, 0.8)'
                }
            },
            data: [
                //value当前进度 + 颜色
                {
                    value: "{$orderResource.resourceOrderTodayTotal}",
                    itemStyle: {
                        normal: {
                            color: '#E6A500'
                        }
                    }
                },
                //(maxValue进度条最大值 - value当前进度) + 颜色
                {
                    value: "{$orderResource.resourceOrderLastTotal}",
                    itemStyle: {
                        normal: {
                            color: '#5B78FF'
                        }
                    }
                }
            ]
        }]
    };

    myChart.setOption(option);



    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('comm-city'));
    var str1 = $('#datas1').val().split(';');
    var arr1 = [];
    for (var ii in str1) {
        // 转换成对象
        var obj1 = eval('(' + str1[ii] + ')');
        console.log(obj1);
        arr1.push(obj1)
    }
    console.log(arr1);

    // 指定图表的配置项和数据
    // 指定图表的配置项和数据
    var option = {
        title: '',
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        color: ['#F25021', '#F8AC16', '#4F1DF6', '#5B78FF', '#FF6363', '#29abe2'],
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$orderArea.count}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '地区分布',
                    textAlign: 'center',
                    fill: '#0F1438',
                    fontSize: 12
                }
            }
        ],
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '64%'],//['外圆大小', '内圆大小']
            center: ['50%', '50%'],//圆心位置['左右'， '上下']
            label: {
                normal: {
                    formatter: '{b} {c}'
                }
            },
            data: arr1,
            labelLine:{
                normal:{
                    //length:20,  // 改变标示线的长度
                },
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    </script>
<style>
    .fix-d {
        display: flex;
        justify-content: space-between;
    }
    .wi-dth {
        width: 50%;
        text-align: center;
    }
    .order-total{
        font-size: 10px;
        color: #999999;
    }
    .d-str-rig{
        color: #E6A500;
        font-weight: 600;
        font-size: 20px;
    }
    .d-str {
        color: #1C73FE;
        font-weight: 600;
        font-size: 20px;
    }
    .card-dth {
        padding: 8px;
    }
    .tit-user {
        text-align: center;
        font-weight: 600;
    }
    .price {
        color: #5B78FF;
    }
    .p-str {
        color: #0E1525;
    }
    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
    }
    .user {
        display: flex;
        justify-content: space-between;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .d-add {
        color: #000000;
        margin-left: 7px;
        font-size: 18px;
        font-weight: 600;
    }
    .d-fix {
        text-align: center;
    }
</style>
</body>
</html>